<template>
  <div class="login-page">
    <div class="login-left">
      <div class="login-bg"></div>
    </div>
    <div class="login-right">
      <div class="login-box">
        <div class="login-logo">
          <img src="../assets/img/login_logo.png" alt="">
        </div>
        <div class="login-xian">
            <span>欢迎登录</span>
        </div>
        <div class="login-title">贷超后台管理系统</div>
        <div class="login-wrapper">
          <div class="input-box">
            <el-input
              @focus="icon.username=true;inputborderError=false;errTip=''"
              @blur="icon.username=false"
              :class="{'inputBorderError' : inputborderError}"
              placeholder="账户"
              v-model.trim="account.username">
              <i slot="prefix" class="el-input__icon iconfont icon-zhanghu" :class="{focus:icon.username}"></i>
              <i slot="suffix" class="el-input__icon iconfont icon-shanchu"
                v-if="account.username !=''"
                @click="account.username='';inputborderError=false;errTip=''"></i>
            </el-input>
          </div>
          <div class="input-box">
            <el-input
              type="password"
              @focus="icon.userpassword=true;inputborderError=false;errTip=''"
              @blur="icon.userpassword=false"
              :class="{'inputBorderError' : inputborderError}"
              placeholder="密码"
              v-model.trim="account.userpassword">
              <i slot="prefix" class="el-input__icon iconfont icon-mima" :class="{focus:icon.userpassword}"></i>
              <i slot="suffix" class="el-input__icon iconfont icon-shanchu"
                v-if="account.userpassword !=''"
                @click="account.userpassword='';inputborderError=false;errTip=''"></i>
            </el-input>
          </div>
          <div class="input-checked">
            <el-checkbox v-model="checked" checked class="rember">记住密码</el-checkbox>
          </div>
          <div class="input-error">{{errTip}}</div>
          <div class="input-button"  v-loading="loading">
            <el-button
              :class="{'el-button--success' : (account.username && account.userpassword),'el-button--info' : (account.username == '' || account.userpassword == '')}"
              :disabled="(account.username == '' || account.userpassword == '')"
              @click="Login"
            >登录</el-button>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
import md5 from "md5";
import { Base64 } from "js-base64";
export default {
  data() {
    return {
      checked: false,
      account: {
        username: "",
        userpassword: ""
      },
      icon: {
        username: false,
        userpassword: false
      },
      inputborderError: false,
      errTip: "",
      loading: false
    };
  },
  methods: {
    Login() {
      let that = this;
      let username = that.account.username.trim();
      let password = that.account.userpassword.trim();

      let user = username + ":" + password;
      console.log(username,'-----')
      that.loading = true;
      that.ajaxJson({
        url: "/auth/login",
        data: {
          loginName:username,
          password:md5(password),
        },
        success: function(data) {
          that.loading = false;
          if (data.code == "0") {
            that.$router.push({ name: "index" });
            if (that.checked) {
              that.localData("set", "login_auth", Base64.encode(user));
            } else {
              that.localData("clean", "login_auth");
            }
            that.localData("set", "login_user", data.data);
          } else {
            that.errTip = data.message;
            that.inputborderError = true;
          }
        }
      });
    }
  },
  created() {
    let that = this;
    let user_auth = that.localData("get", "login_auth");
    if (user_auth) {
      that.account.username = Base64.decode(user_auth).split(":")[0];
      that.account.userpassword = Base64.decode(user_auth).split(":")[1];
    }
  }
};
</script>
<style lang="less">
.login-page {
  width: 100%;
  height: 100%;
  display: flex;
  position: fixed;
  left: 0;
  top: 0;
  .login-left {
    flex: 1;
    .login-bg {
      width: 100%;
      height: 100%;
      background: url("../assets/img/loginBanner.jpg") no-repeat center/cover;
    }
  }
  .login-right {
    width: 480px;
    background: #fff;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    .login-box {
      width: 340px;
      height: auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .login-logo {
        width: 150px;
        height: 150px;
        margin: 0 auto 30px;
      }
      .login-xian {
        position: relative;
        margin-bottom: 10px;
        span {
          font-size: 22px;
          color: #333;
          letter-spacing: 0;
        }
      }
      .login-xian::before {
        content: "";
        width: 80px;
        height: 1px;
        background: #ddd;
        position: absolute;
        top: 50%;
        left: 150%;
      }
      .login-xian::after {
        content: "";
        width: 80px;
        height: 1px;
        background: #ddd;
        position: absolute;
        top: 50%;
        right: 150%;
      }
      .login-title {
        font-size: 14px;
        color: #999;
        margin-bottom: 50px;
      }
      .login-wrapper {
        width: 100%;
        .input-box {
          margin-bottom: 20px;
          width: 340px;
          height: 44px;
          .el-input {
            .focus {
              color: #ff7500;
            }
          }

          .el-input__icon {
            font-size: 20px;
            color: #ccc;
          }
        }
        .input-checked {
          width: 100%;
          height: 22px;
        }
        .input-error {
          margin: 15px 0;
          height: 20px;
          color: #ff0000;
          font-size: 20px;
          line-height: 20px;
        }
        .input-button {
          width: 100%;
          .el-button {
            width: 100%;
            height: 46px;
            font-size: 20px;
            letter-spacing: 10px;
          }
          .buttonColor {
            background: #ff0000;
          }
        }
      }
    }
  }
  .inputBorderError {
    border: 1px solid #ff0000;
  }

  .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #666;
  }
  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #333;
    border-color: #333;
  }
  .el-checkbox__inner:hover {
    border-color: #333;
  }
  .el-checkbox__input.is-focus .el-checkbox__inner {
    border-color: #333;
  }
}
</style>


